<template>
	<view class="rental-management">
		<!-- 筛选条件 -->
		<view class="filter-section" :class="{ 'has-batch-action': showBatchAction }">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="custom-search">
					<view class="search-icon">
						<u-icon name="search" size="16" color="#999"></u-icon>
					</view>
					<input v-model="searchQuery" type="text" class="search-input" placeholder-class="search-input-placeholder" placeholder="搜索进货单号" @confirm="handleSearch" />
					<view class="search-btn" @click="handleSearch">搜索</view>
				</view>
			</view>
			<view class="custom-tabs">
				<view v-for="(item, index) in tabs" :key="item.value" class="tab-item" :class="{ active: currentTab === index }" @click="handleTabChange(index)">
					<view class="tab-content">
						<view class="tab-name">{{ item.name }}</view>
						<view class="tab-count">（{{ item.count }}）</view>
					</view>
				</view>
			</view>

			<view class="filter-row">
				<view class="date-range">
					<uni-datetime-picker @change="handleDateChange" v-model="datetimerange" type="daterange" rangeSeparator="至" class="date-picker" />
				</view>

				<view class="batch-transfer-btn" @click="handleBatchTransfer">
					{{ isBatchMode ? '选择转让' : '批量转让' }}
				</view>
			</view>
		</view>

		<!-- 租赁列表 -->
		<view class="rental-list">
			<!-- 空状态 -->
			<view v-if="!loading && rentalList.length === 0" class="empty-state">
				<view class="empty-content">
					<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
					<view class="empty-text">
						<text class="empty-title">暂无租赁记录</text>
						<text class="empty-desc">当前没有找到相关的租赁记录</text>
					</view>
				</view>
			</view>

			<!-- 列表内容 -->
			<view v-else>
				<!-- 全选 -->
				<view v-if="isBatchMode" class="select-all-row" @click="toggleSelectAll">
					<view class="checkbox-wrapper">
						<image class="custom-checkbox" :src="allSelected ? '/static/circle-select.png' : '/static/circle.png'" mode="aspectFit" />
					</view>
					<text class="select-all-text">全选</text>
				</view>
				<view v-for="(item, index) in rentalList" :key="index" class="rental-item" @click="goToDetail(item)">
					<!-- 第一行：左侧序号+创建时间，右侧状态 -->
					<view class="item-row first-row">
						<view class="left-content">
							<text class="item-number">{{ index + 1 }}</text>
							<text class="create-time">创建时间：{{ item.createtime }}</text>
						</view>
						<view class="status-tag">{{ getStatusText(item.leasing_status) }}</view>
					</view>

					<!-- 第二行：手机型号 + 已投保标签 + 选择框 -->
					<view class="item-row product-row">
						<view class="product-name-wrapper">
							<view v-if="isBatchMode" class="checkbox-wrapper" @click.stop="isTransferable(item) && toggleItemSelection(item, index)">
								<image
									class="custom-checkbox"
									:src="!isTransferable(item) ? '/static/circle-gray.png' : item.checked ? '/static/circle-select.png' : '/static/circle.png'"
									mode="aspectFit"
								/>
							</view>
							<text class="product-name" :class="{ 'ml-0': !isBatchMode }">{{ item.product_name }}</text>
						</view>
						<view v-if="item.trusteeship_order_id" class="insured-tag">已托管</view>
					</view>

					<!-- 第三行：规格 -->
					<view class="item-row">
						<text class="label">规格：</text>
						<text class="value">{{ item.product_attr }}</text>
					</view>

					<!-- 第四行：期数 -->
					<view class="item-row">
						<text class="label">租赁期：</text>
						<text class="value">{{ item.lease_start_time }} 至 {{ item.lease_end_time }}（{{ item.lease_time }}个月）</text>
					</view>

					<!-- 第五行：价格和收益 -->
					<view class="item-row last-row">
						<text class="label">价格：</text>
						<text class="price">¥{{ item.payment_amount }}</text>

						<!-- 操作按钮 -->
						<view class="action-buttons"></view>
					</view>
				</view>

				<!-- 加载更多 -->
				<u-loadmore :line="true" :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" v-if="rentalList.length > 0" />
			</view>
		</view>
		<!-- 底部批量操作栏 -->
		<view v-if="showBatchAction" class="batch-action-bar">
			<view class="batch-action-content">
				<button class="confirm-btn" @click="showCustomModal">确认转让</button>
			</view>
		</view>
		<!-- 自定义弹窗组件 -->
		<custom-modal
			:show="showModal"
			title="温馨提示"
			:buttons="{
				showCancel: true,
				showConfirm: true,
				confirmText: '确认',
				cancelText: '取消'
			}"
			:options="{
				closeOnClickOverlay: true,
				width: '490rpx'
			}"
			@confirm="handleConfirm"
			@cancel="handleCancel"
			@close="handleCancel"
		>
			<view class="modal-content">
				<view class="modal-line highlight">出租≥3个月的设备才能转让</view>
				<view class="modal-line">转让价格=（采购价格/总月份）*（总月份-已租月份）</view>
				<view class="modal-line note">
					<text>备注：用户转让成功后资金在余额里面查看</text>
					<text>一旦转让将无法撤销</text>
				</view>
			</view>
		</custom-modal>
	</view>
</template>

<script>
import rental from '@/api/modules/rental';
import customModal from '@/components/custom-modal.vue';
export default {
	components: {
		customModal
	},
	data() {
		return {
			// 加载状态
			loadStatus: 'loadmore',
			loadingText: '正在加载...',
			loadmoreText: '上拉加载更多',
			nomoreText: '没有更多了',
			selectedItems: [],
			showBatchAction: false,
			isBatchMode: false, // 是否处于批量选择模式
			allSelected: false, // 是否全选
			showModal: false,
			searchQuery: '',
			currentTab: 0,
			datetimerange: [],
			startDate: '',
			endDate: '',
			tabs: [
				{ name: '全部', value: 'all', count: 0 },
				{ name: '待出租', value: '0', count: 0 },
				{ name: '匹配中', value: '1', count: 0 },
				{ name: '出租中', value: '2', count: 0 },
				{ name: '已完结', value: '5', count: 0 }
			],
			rentalList: [],
			// 分页相关
			page: 1,
			pageSize: 20,
			total: 0,
			loading: false,
			finished: false,
			// 测试模式开关，true使用测试数据，false使用真实接口
			isTestMode: false,
			refreshing: false
		};
	},
	onLoad() {
		this.initData();
	},
	onPullDownRefresh() {
		this.refreshing = true;
		this.initData();
	},
	onReachBottom() {
		if (this.loading || this.finished) return;
		this.loadStatus = 'loading';
		this.page++;
		this.fetchRentalList();
	},
	methods: {
		// 确认按钮事件
		async handleConfirm() {
			if (!this.selectedItems.length) {
				uni.showToast({
					title: '请选择要转让的设备',
					icon: 'none'
				});
				return;
			}

			try {
				uni.showLoading({
					title: '处理中...',
					mask: true
				});

				// 获取选中的设备ID数组
				const ids = this.selectedItems.map((item) => item.id);

				// 调用转让API
				await rental.transferLeasing(ids);

				// 转让成功处理
				uni.hideLoading();
				uni.showToast({
					title: '转让成功',
					icon: 'success'
				});

				// 重置状态并刷新列表
				this.resetBatchState();
				this.fetchRentalList();
			} catch (error) {
				console.error('转让失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: error.message || '转让失败，请重试',
					icon: 'none'
				});
			} finally {
				this.showModal = false;
			}
		},

		// 取消按钮事件
		handleCancel() {
			console.log('取消按钮被点击');
			this.showModal = false;
		},

		// 显示弹窗
		showCustomModal(content) {
			if (content) {
				this.modalContent = content;
			}
			this.showModal = true;
		},
		/**
		 * 获取测试数据
		 * @param {number} page - 当前页码
		 * @param {number} pageSize - 每页数量
		 * @returns {Promise} 返回测试数据
		 */
		async getTestData(page, pageSize) {
			// 模拟网络延迟
			await new Promise((resolve) => setTimeout(resolve, 500));

			const statuses = ['待出租', '匹配中', '出租中', '已完结'];
			const products = ['iPhone 13 Pro Max', 'Huawei P50 Pro', 'Xiaomi 12 Pro', 'OPPO Find X5', 'vivo X80 Pro', 'Samsung S22 Ultra', 'Redmi K50', 'OnePlus 10 Pro'];
			const data = [];
			const startIndex = (page - 1) * pageSize;
			const totalItems = 50; // 总共生成50条测试数据

			// 计算当前页应该生成的数据条数
			const currentPageSize = Math.min(pageSize, Math.max(0, totalItems - startIndex));

			// 获取当前日期和两年前的日期
			const now = new Date();
			const twoYearsAgo = new Date();
			twoYearsAgo.setFullYear(now.getFullYear() - 2);

			for (let i = 0; i < currentPageSize; i++) {
				const random = Math.floor(Math.random() * products.length) % products.length;
				const randomStatus = Math.floor(Math.random() * statuses.length);
				const randomPrice = (Math.floor(Math.random() * 10000) + 3000).toFixed(2);
				const randomBoolean = Math.random() > 0.5;

				// 生成两年内的随机日期
				const randomTime = twoYearsAgo.getTime() + Math.random() * (now.getTime() - twoYearsAgo.getTime());
				const randomDate = new Date(randomTime);

				// 格式化为 YYYY-MM-DD
				const formattedDate = randomDate.toISOString().split('T')[0];

				data.push({
					id: startIndex + i + 1,
					product_name: products[random],
					create_time: formattedDate,
					status: statuses[randomStatus],
					specs: '256GB 黑色',
					periods: '12期',
					price: randomPrice,
					isInsured: randomBoolean
				});
			}

			return {
				data: {
					data,
					total: totalItems,
					current_page: page,
					last_page: Math.ceil(totalItems / pageSize)
				}
			};
		},

		/**
		 * 获取真实接口数据
		 * @param {number} page - 当前页码
		 * @param {number} pageSize - 每页数量
		 * @returns {Promise} 返回接口数据
		 */
		async getRealData(page, pageSize) {
			const params = {
				page,
				pageSize,
				leasing_status: this.tabs[this.currentTab].value,
				keyword: this.searchQuery,
				start_date: this.datetimerange[0] || '',
				end_date: this.datetimerange[1] || ''
			};

			return await rental.getRentalList(params);
		},

		// 跳转到详情页
		goToDetail(item) {
			uni.navigateTo({
				url: `/package-purse/rentalManagement/detail?id=${item.id}`
			});
		},

		// 初始化数据
		async initData() {
			this.page = 1;
			this.rentalList = [];
			this.finished = false;
			await this.fetchRentalList();
			if (this.refreshing) {
				uni.stopPullDownRefresh();
				this.refreshing = false;
			}
		},

		// 搜索
		handleSearch() {
			this.initData();
		},

		// 切换标签
		handleTabChange(index) {
			this.currentTab = index;
			this.initData();
		},

		// 日期范围变化
		handleDateChange(e) {
			this.datetimerange = e;
			this.initData();
		},

		// 获取出租列表
		async fetchRentalList() {
			if (this.loading) return;

			this.loading = true;

			try {
				// 如果是第一页，清空当前列表
				if (this.page === 1) {
					this.rentalList = [];
				}

				// 根据模式获取数据
				const res = this.isTestMode ? await this.getTestData(this.page, this.pageSize) : await this.getRealData(this.page, this.pageSize);

				if (res && res.data) {
					const { data, total, current_page, last_page, statistics } = res.data;

					// 如果是第一页，直接赋值，否则追加数据
					if (this.page === 1) {
						this.rentalList = data;
					} else {
						this.rentalList = [...this.rentalList, ...data];
					}

					this.total = total;
					this.page = current_page;
					// 更新加载状态
					if (current_page >= last_page || data.length < this.pageSize) {
						this.loadStatus = 'nomore';
						this.finished = true;
					} else {
						this.loadStatus = 'loadmore';
						this.finished = false;
					}

					// 更新标签数量
					this.updateTabCounts(statistics);
				}
			} catch (error) {
				console.error('获取租赁列表失败:', error);
				uni.showToast({
					title: '获取数据失败，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				uni.stopPullDownRefresh();
			}
		},

		// 更新标签数量
		updateTabCounts(statistics) {
			// 定义tabs索引与statistics属性的映射关系
			const tabMappings = [
				{ index: 0, prop: 'total' },
				{ index: 1, prop: 'for_rent' },
				{ index: 2, prop: 'matching' },
				{ index: 3, prop: 'under_lease' },
				{ index: 4, prop: 'completed' }
			];

			// 遍历映射关系，使用this.$set更新数据
			tabMappings.forEach(({ index, prop }) => {
				// 确保statistics包含对应的属性
				if (statistics.hasOwnProperty(prop)) {
					// 使用this.$set更新数组中的对象属性，确保响应式
					this.$set(this.tabs[index], 'count', statistics[prop]);
				} else {
					this.$set(this.tabs[index], 'count', 0);
				}
			});
		},

		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待出租',
				1: '匹配中',
				2: '出租中',
				3: '已退机',
				4: '半路退机',
				5: '已完结'
			};
			return statusMap[status] || '未知状态';
		},

		// 获取状态类型
		getStatusType(status) {
			const statusMap = {
				0: 'waiting',
				1: 'matching',
				2: 'renting',
				3: 'returned',
				4: 'partially-returned',
				5: 'completed'
			};
			return statusMap[status] || 'default';
		},

		// 处理转让
		handleTransfer(item) {
			uni.showModal({
				title: '提示',
				content: `确定要转让 ${item.product_name} 吗？`,
				success: (res) => {
					if (res.confirm) {
						// 调用转让API
						console.log('转让商品:', item);
						// 这里可以添加转让逻辑
					}
				}
			});
		},

		// 检查订单是否可转让（超过3个月）
		isTransferable(item) {
			if (!item.create_time) return false;
			const createDate = new Date(item.create_time);
			const threeMonthsAgo = new Date();
			threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
			return createDate <= threeMonthsAgo;
		},

		// 切换选择状态
		toggleItemSelection(item, index) {
			if (!this.isTransferable(item)) return;

			this.$set(this.rentalList[index], 'checked', !item.checked);

			// 更新选中项
			this.selectedItems = this.rentalList.filter((item) => item.checked);
			this.showBatchAction = this.selectedItems.length > 0;
		},

		// 确认批量转让
		confirmBatchTransfer() {
			// 获取选中的可转让项
			const selectedTransferable = this.rentalList.filter((item) => item.checked && this.isTransferable(item));

			if (selectedTransferable.length === 0) {
				uni.showToast({
					title: '请选择要转让的项目',
					icon: 'none'
				});
				return;
			}

			// 这里添加实际的转让逻辑
			uni.showLoading({ title: '处理中...' });

			// 模拟API调用
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: `成功转让 ${selectedTransferable.length} 个项目`,
					icon: 'success'
				});

				// 重置选择状态
				this.resetSelection();
			}, 1500);
		},

		// 切换全选/取消全选
		toggleSelectAll() {
			this.allSelected = !this.allSelected;
			this.rentalList.forEach((item) => {
				if (this.isTransferable(item)) {
					this.$set(item, 'checked', this.allSelected);
				}
			});
			this.updateSelectedItems();
		},

		// 更新选中项
		updateSelectedItems() {
			this.selectedItems = this.rentalList.filter((item) => item.checked);
			// 更新全选状态
			const transferableItems = this.rentalList.filter((item) => this.isTransferable(item));
			if (transferableItems.length > 0) {
				this.allSelected = transferableItems.every((item) => item.checked);
			} else {
				this.allSelected = false;
			}
		},

		// 重置选择状态
		resetSelection() {
			this.rentalList.forEach((item) => {
				this.$set(item, 'checked', false);
			});
			this.allSelected = false;
			this.selectedItems = [];
			this.isBatchMode = false;
			this.showBatchAction = false;
		},

		// 处理批量转让按钮点击
		handleBatchTransfer() {
			// 检查是否有数据
			if (this.rentalList.length === 0) {
				uni.showToast({
					title: '暂无数据可操作',
					icon: 'none'
				});
				return;
			}

			if (this.isBatchMode) {
				// 如果已经在批量选择模式，则显示确认弹窗
				if (this.selectedItems.length === 0) {
					uni.showToast({
						title: '请至少选择一个设备',
						icon: 'none'
					});
					return;
				}
				this.showModal = true;
			} else {
				// 进入批量选择模式
				this.isBatchMode = true;
				this.showBatchAction = true;
			}
		},

		// 查看详情
		viewDetails(item) {
			uni.navigateTo({
				url: `/package-purse/rentalManagement/detail?id=${item.id}`
			});
		}
	}
};
</script>
<style>
.search-input-placeholder {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
}
</style>
<style lang="scss" scoped>
/* 弹窗内容样式 */
.modal-content {
	padding: 20rpx 0;
	text-align: center;
}

.modal-line {
	margin-bottom: 20rpx;
	font-family: 'Source Han Sans CN';
	font-weight: 500;
	font-size: 24rpx;
	color: #262626;
}

.modal-line.highlight {
	font-family: 'PingFang SC';
	font-weight: bold;
	font-size: 28rpx;
	color: #ff0000;
	margin-bottom: 26rpx;
}

.modal-line.note {
	display: flex;
	flex-direction: column;
	font-family: 'Source Han Sans CN';
	font-weight: 400;
	font-size: 20rpx;
	color: #999999;
}

.modal-line.note .warning {
	color: #ff0000;
}
.rental-management {
	padding: 20rpx 30rpx;
	background-color: #f7f8fa;

	.search-bar {
		margin-bottom: 36rpx;
		padding: 0 20rpx;

		.custom-search {
			display: flex;
			align-items: center;
			width: 100%;
			height: 60rpx;
			position: relative;

			.search-icon {
				position: absolute;
				left: 50rpx;
				z-index: 1;
			}

			::v-deep .search-input {
				flex: 1;
				height: 100%;
				padding: 0 24rpx 0 85rpx;
				font-size: 28rpx;
				background: rgba(248, 248, 250, 0.99);
				border-right: none;
				border-radius: 29rpx 0 0 29rpx;
				outline: none;
				box-sizing: border-box;
			}

			.search-btn {
				width: 110.3rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ff4400;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				border-radius: 0 29rpx 29rpx 0;
			}
		}
	}

	.filter-section {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		&.has-batch-action {
			margin-bottom: 0;
		}

		.custom-tabs {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 10rpx 0;

				.tab-content {
					.tab-name {
						font-size: 28rpx;
						color: #999999;
						margin-right: 8rpx;
					}

					.tab-count {
						font-size: 24rpx;
						color: #999999;
					}
				}

				&.active {
					.tab-name,
					.tab-count {
						color: #333333;
						font-weight: bold;
					}
				}
			}
		}

		.filter-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.date-range {
			width: 364.7rpx;
			margin-right: 20rpx;

			::v-deep .uni-date {
				width: 364.7rpx;
				height: 60rpx;
				background: #f4f6f8;
				border-radius: 29rpx;
				opacity: 0.99;
				position: relative;
				z-index: 2;
				flex: none;
			}

			::v-deep .uni-date .icon-calendar {
				display: none;
			}

			::v-deep .uni-date .uni-icons {
				font-size: 24rpx !important;
			}
			::v-deep .icon-calendar {
				display: none;
			}
			::v-deep .uniui-calendar {
				display: none;
			}

			::v-deep .uni-date-x--border {
				border: none;
			}

			::v-deep .uni-date-x {
				background-color: transparent;
				align-items: start;
			}

			::v-deep .uni-date__x-input {
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				align-items: center;
				line-height: normal;
				height: 60rpx;
				justify-content: center;
			}

			::v-deep .range-separator {
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				align-items: center;
				line-height: normal;
				height: 60rpx;
				justify-content: center;
			}

			::v-deep .u-subsection {
				width: 240rpx;
				height: 56rpx;
				background: #ffffff;
				border-radius: 16rpx;
				opacity: 0.99;
				position: relative;
				z-index: 1;
			}

			::v-deep .u-subsection__item__text {
				font-family: 'PingFang SC' !important;
				font-weight: 400 !important;
				font-size: 24rpx !important;
				color: #999999 !important;
			}

			::v-deep .u-subsection__bar {
				background: #fff;
				border-radius: 7rpx;
				opacity: 0.99;
			}
		}

		.batch-transfer-btn {
			font-weight: 500;
			font-size: 26rpx;
			color: #ff0000;
			margin-left: 20rpx;
			white-space: nowrap;
			line-height: 1.4;
			cursor: pointer;
			border-bottom: 2rpx solid rgba(255, 0, 0, 0.2);
		}

		.status-tabs {
			margin-bottom: 10rpx;
		}

		::v-deep .uni-date__x-input {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}

		::v-deep .range-separator {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}

		.date-separator {
			margin: 0 10rpx;
			color: #909399;
		}
	}
}

.select-all-row {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 10rpx 0rpx;

	.select-all-text {
		margin-left: 12rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1;
	}

	.checkbox-wrapper {
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.custom-checkbox {
		width: 20rpx;
		height: 20rpx;
		display: block;
	}
}

.rental-list {
	min-height: 400rpx;
	position: relative;

	/* 空状态样式 */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 60vh;
		padding: 40rpx;

		.empty-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			max-width: 400rpx;
		}

		.empty-image {
			width: 240rpx;
			height: 180rpx;
			margin-bottom: 40rpx;
			opacity: 0.8;
		}

		.empty-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;

			.empty-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 12rpx;
			}

			.empty-desc {
				font-size: 26rpx;
				color: #999;
				line-height: 1.5;
			}
		}

		.empty-btn {
			width: 100%;

			.u-btn {
				width: 200rpx;
				height: 72rpx;
				font-size: 28rpx;
				border-radius: 36rpx;
			}
		}
	}

	.rental-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 22rpx;
		position: relative;

		.item-row {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			color: #999999;

			&.product-row {
				.product-name-wrapper {
					display: flex;
					align-items: center;
					flex: 1;

					.product-name {
						margin-left: 12rpx;
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
						&.ml-0 {
							margin-left: 0;
						}
					}
				}
			}

			&.first-row {
				justify-content: space-between;
				margin-bottom: 20rpx;

				.left-content {
					display: flex;
					align-items: center;
					flex: 1;
				}

				.status-tag {
					margin-left: 20rpx;
					padding: 4rpx 12rpx;
					background-color: rgba(255, 68, 0, 0.1) !important;
					color: #ff4603 !important;
					border-radius: 6rpx !important;
					font-size: 24rpx;
					white-space: nowrap;
				}

				&--success,
				&--warning,
				&--error,
				&--info {
					background-color: rgba(255, 68, 0, 0.1) !important;
					color: #ff4603 !important;
					border: none !important;
				}
			}
		}

		&.product-row {
			margin-bottom: 20rpx;
			align-items: center;
		}

		&.last-row {
			margin-bottom: 0;
			justify-content: space-between;
			align-items: center;
		}

		.checkbox-wrapper {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			.custom-checkbox {
				width: 20rpx;
				height: 20rpx;
				display: block;
			}
		}

		.item-number {
			min-width: 66.5rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background: rgba(255, 68, 0, 0.1);
			border-radius: 14rpx;
			margin-right: 20rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #ff0000;
			flex-shrink: 0;
		}

		.create-time {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.product-name {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin-right: 12rpx;
		}

		.insured-tag {
			margin-left: 10rpx;
			background-color: #ff4806 !important;
			color: #ffffff !important;
			border-radius: 4rpx;
			border: none !important;
			font-weight: 400;
			font-size: 22rpx;

			&--error {
				background-color: #ff4806 !important;
				color: #ffffff !important;
				border: none !important;
			}
		}

		.label {
			font-size: 26rpx;
			color: #909399;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		.value {
			font-size: 26rpx;
		}

		.price {
		}

		.action-buttons {
			margin-left: auto;

			.u-btn {
				margin-left: 20rpx;
			}
		}
	}
}

/* 底部批量操作栏 */
.batch-action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 30rpx;
	z-index: 100;

	.batch-action-content {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.selected-count {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}

		.confirm-btn {
			width: 680rpx;
			height: 90rpx;
			line-height: 80rpx;
			text-align: center;
			background: #ff4400;
			color: #fff;
			border-radius: 40rpx;
			font-size: 30rpx;
			border: none;
			margin: 0;
			padding: 0;

			&::after {
				border: none;
			}

			&:active {
				opacity: 0.8;
			}

			&.disabled {
				background: #ccc;
				color: #999;
			}
		}
	}
}
</style>
